<template>
  <view :class="['classify-content']" :style="[{ height: contentHeight }]">
    <view class="section-group">
      <secondTopTem
        v-if="styleType == 3"
        :propsData="propsData"
        :contentHeight="contentHeight"
        :catList="catList"
      ></secondTopTem>
      <secondPicTem
        v-if="isSecondPicTem"
        :propsData="propsData"
        :contentHeight="contentHeight"
        :catList="catList"
        ref="secondPicTem"
      ></secondPicTem>
      <firstPicTem
        v-if="styleType == 9"
        :propsData="propsData"
        :contentHeight="contentHeight"
        :catList="catList"
      ></firstPicTem>
      <commonClassifyTem
        v-if="styleType == 6"
        :propsData="propsData"
        :contentHeight="contentHeight"
        :catList="catList"
      ></commonClassifyTem>
      <leftAsideTem
        v-if="isLeftSideTem"
        :propsData="propsData"
        :contentHeight="contentHeight"
        :catList="catList"
      ></leftAsideTem>
      <leftWithMenu
        v-if="isLeftWithMenu"
        :propsData="propsData"
        :contentHeight="contentHeight"
        :catList="catList"
      ></leftWithMenu>
      <oneLevelTopNav
        v-if="styleType == 8"
        :propsData="propsData"
        :contentHeight="contentHeight"
        :catList="catList"
      ></oneLevelTopNav>
    </view>
  </view>
</template>

<script>
import leftAsideTem from "./templates/leftAsideTem.vue";
import secondTopTem from "./templates/secondTopTem.vue";
import secondPicTem from "./templates/secondPicTem.vue";
import firstPicTem from "./templates/firstPicTem.vue";
import commonClassifyTem from "./templates/commonClassifyTem.vue";
import leftWithMenu from "./templates/leftWithMenu.vue";
import oneLevelTopNav from "./templates/oneLevelTopNav.vue.vue";
import { diySysPageMixin } from "../../mixins/index.js";
export default {
  name: "",
  props: {
    propsData: {
      type: Object,
      default: {},
    },
    catList: {
      type: Array,
      default: [],
    },
    useFoot: {
      type: Boolean,
      default: true,
    },
  },
  mixins: [diySysPageMixin], //混入文件
  components: {
    leftAsideTem,
    secondTopTem,
    secondPicTem,
    firstPicTem,
    commonClassifyTem,
    leftWithMenu,
    oneLevelTopNav,
  },
  data() {
    return {};
  },
  mounted() {},
  watch: {},
  computed: {
    styleType() {
      return this.propsData.params.styleType || "1";
    },
    adConfig() {
      return this.propsData.params.abConfig || {};
    },
    isLeftSideTem() {
      let arr = [1, 7];
      let styleType = Number(this.styleType);
      return arr.includes(styleType);
    },
    isLeftWithMenu() {
      let arr = [2];
      let styleType = Number(this.styleType);
      return arr.includes(styleType);
    },
    isSecondPicTem() {
      let arr = [4, 5];
      let styleType = Number(this.styleType);
      return arr.includes(styleType);
    },
    contentHeight() {
      let str = "";
      if (this.useFoot) {
        str =
          "calc(" +
          this.systemInfo.windowHeight +
          "px - " +
          this.statusBarHeight +
          "px - 88rpx - 100rpx - env(safe-area-inset-bottom))";
        if (this.systemInfo.system.indexOf("Android") > -1) {
          let sys = this.systemInfo.system;
          let arr = sys.split(" ");
          let arr1 = arr[1].split(".");
          if (arr1 < 10) {
            str =
              "calc(" +
              this.systemInfo.windowHeight +
              "px - " +
              this.statusBarHeight +
              "px - 88rpx - 100rpx)";
          }
        }
      } else {
        str =
          "calc(" +
          this.systemInfo.windowHeight +
          "px - " +
          this.statusBarHeight +
          "px - 88rpx)";
      }
      return str;
    },
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.classify-content {
  width: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: scroll;
  .section-group {
    width: 100%;
    height: 100%;
  }
  .module-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
}
.classify-content::-webkit-scrollbar {
  width: 0;
  height: 0;
}
</style>
